<template>
  <div class="container">
    <div class="header">
      <img class="title" :src="title" alt="居民服务 “一码通”" />
      <div class="top-menus">
        <!--<div class="top-menu" v-for="(topMenu, key) in topMenus" :key="key">
          <img class="top-menu_icon" :src="topMenu.icon" alt="" />
          <span class="top-menu_name">{{ topMenu.name }}</span>
        </div>-->
        <div class="top-menu">
          <img class="top-menu_icon" :src="topMenus[0].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[0].name }}</span>
        </div>
        <div @click="spreadCode" class="top-menu">
          <img class="top-menu_icon" :src="topMenus[1].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[1].name }}</span>
        </div>
        <div class="top-menu">
          <img class="top-menu_icon" :src="topMenus[2].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[2].name }}</span>
        </div>
        <div class="top-menu" @click="handleGo('/code/mine')">
          <img class="top-menu_icon" :src="topMenus[3].icon" alt="" />
          <span class="top-menu_name">{{ topMenus[3].name }}</span>
        </div>
      </div>
    </div>
    <div class="header--fixed" v-if="isHeaderFixed">
      <!--<img
          v-for="(topMiniMenu, key) in topMiniMenus"
          :key="key"
          :src="topMiniMenu.icon"
          alt=""
      />-->
      <img :src="topMiniMenus[0].icon" alt="" />
      <img :src="topMiniMenus[1].icon" alt="" />
      <img :src="topMiniMenus[2].icon" alt="" />
      <img :src="topMiniMenus[3].icon" @click="handleGo('/code/mine')" alt="" />
    </div>
    <div class="main">
      <div class="banners">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(banner, key) in banners" :key="key">
            <img class="banner" :src="banner.icon" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="center-menus no-scrollbar" ref="center-menus">
        <div
          class="center-menu"
          v-for="(centerMenu, key) in centerMenus"
          :key="key"
        >
          <div class="center-menu_wrapper" @click="handleCenterMenuClick(key)">
            <img class="center-menu_icon" :src="centerMenu.icon" alt="" />
            <span
              class="center-menu_name"
              :class="{ 'center-menu_name--active': key === centerActive }"
              >{{ centerMenu.name }}</span
            >
            <div class="center-menu_block" v-show="key === centerActive"></div>
          </div>
        </div>
      </div>
      <div class="bottom-menus">
        <div
          class="bottom-menu"
          v-for="(bottomMenu, key) in bottomMenus"
          :key="key"
        >
          <div class="bottom-menu_name">{{ bottomMenu.name }}</div>
          <div class="bottom-menu-items">
            <div
              class="bottom-menu-item"
              v-for="(menu, menuKey) in bottomMenu.menus"
              :key="menuKey"
              @click="handleItem(menu)"
            >
              <img class="bottom-menu-item_icon" :src="menu.icon" alt="" />
              <span class="bottom-menu-item_name">{{ menu.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const $ = require("jquery");
const title = require("@/assets/img/home_title.png");
import { getSSCApplyInfo, getSSCSign } from "@/apis/test";
import config from "../test/config";
import localData from "../../assets/localData";
import { storage } from "../../plugins/storage";
import * as types from "../../store/mutation-types";

export default {
  name: "CodeHome",
  data() {
    return {
      title,
      topMenus: localData.topMenus,
      topMiniMenus: localData.topMiniMenus,
      banners: localData.banner,
      centerMenus: localData.centerMenus,
      centerActive: 0,
      bottomMenus: [],
      isHeaderFixed: false
    };
  },
  mounted() {
    this.centerActive = 0;
    window.addEventListener("scroll", this.handleScroll);
    this.bottomMenus = this.centerMenus[0].bottomMenus;
    // console.log(localStorage.getItem("token"));
  },
  methods: {
    handleItem(item) {
      // this.jump();
      let scen = localData.scen.wx; // scen: h5 -- 跳转第三方h5; wx: 跳转第三方微信小程序。
      if (item.name === "在线购票") {
        let uri = "http://10.19.92.209:7000/#/";
        // let url =
        //   "http://172.30.3.74:5567/auth/oauth/authorize?client_id=1aDv8seDEMO&response_type=code&scope=baseInfo&redirect_uri=" +
        //   uri + scen +
        //   "?access_token=" +
        //   localStorage.getItem("token");

        location.href =
          "http://172.30.3.74:5567/auth/oauth/authorize?client_id=1aDv8seDEMO&response_type=code&scope=baseInfo&redirect_uri=" +
          uri + scen +
          "?access_token=" +
          localStorage.getItem("token");
      } else if (item.name === "避暑山庄简介") {
        location.href = "http://10.19.92.209:8990/#/scenic";
      }
    },
    async jump() {
      let params = {

      };
      let res = await this.$bridge.jsCall("pullApp", { params });
      if (res) {
        location.href =
                "/inner?back=" + JSON.stringify(res);
      }
    },
    handleScroll() {
      let ele = document.querySelector(".main");
      if (ele) {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let offsetTop = 153; // document.querySelector("").offsetTop;
        this.isHeaderFixed = scrollTop > offsetTop ? true : false;
      }
    },
    handleCenterMenuClick(active) {
      this.centerActive = active;
      this.bottomMenus = this.centerMenus[active].bottomMenus;
      // scroll action
      let root = $(".center-menus");
      let currentChild = $(".center-menu").eq(active);
      let rootWidth = root.outerWidth();
      let currentChildWidth = currentChild.outerWidth();
      let scrollWidth = root.scrollLeft();
      let offsetWidth = currentChild.position().left;
      let offsetLeft =
        offsetWidth + currentChildWidth - rootWidth + scrollWidth;
      if (offsetWidth > rootWidth - currentChildWidth) {
        root.animate({ scrollLeft: offsetLeft }, 200);
      } else if (offsetWidth < 0) {
        root.animate({ scrollLeft: scrollWidth + offsetWidth }, 200);
      }
    },
    spreadCode() {
      getSSCApplyInfo().then(res => {
        console.log("sssss", res);
        if (
          res.data &&
          (res.data.signFlag === "0" || res.data.signFlag === "2")
        ) {
          // 0未签发，1本渠道已签发，2其他渠道已签发
          this.apply(res.data); // 签发
        } else if (res.data && res.data.signFlag === "1") {
          this.showCode(res.data); //展码
        }
      });
    },
    showCode(data) {
      let url = location.href.split("?");
      let params = {
        channelNo: data.channelNo,
        signNo: data.signNo,
        returnUrl: url[0],
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        // location.href = `${config.sscServer}/indep/cardInfo?${res.data}`;
        location.href = `${config.sscServer}/indep/ORCode?${res.data}`;
        // console.log("code", `${config.sscServer}/indep/ORCode?${res.data}`);
      });
    },
    apply(data) {
      let url = location.href.split("?");
      let params = {
        channelNo: data.channelNo,
        returnUrl: url[0],
        isWeb: "1"
      };
      getSSCSign(params).then(res => {
        // console.log("eeeee", `${config.sscServer}/main?${res.data}`);
        location.href = `${config.sscServer}/main?${res.data}`;
      });
    },
    handleGo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped lang="less">
.container {
  position: relative;
  background: #ffffff;

  .main {
    margin-top: -17px;
    padding-top: 17px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    //box-shadow: 0px -2px 20px 0 rgba(0, 0, 0, 0.1);

    .bottom-menus {
      padding: 15px;

      .bottom-menu {
        .bottom-menu_name {
          font-size: 16px;
          font-weight: 700;
          color: #333333;
        }

        .bottom-menu-items {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20px;

          .bottom-menu-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 85px;
            margin-top: 20px;

            .bottom-menu-item_icon {
              width: 44px;
              height: 44px;
            }

            .bottom-menu-item_name {
              font-size: 12px;
              text-align: center;
              color: #666666;
              margin-top: 5px;
            }
          }
        }
      }
    }

    .center-menus {
      position: relative;
      overflow-x: scroll;
      white-space: nowrap;
      border-bottom: 1px solid #e4e4e4;

      .center-menu {
        display: inline-block;
        width: 80px;

        .center-menu_wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .center-menu_icon {
            width: 40px;
            height: 40px;
          }

          .center-menu_name {
            font-size: 12px;
            color: #333333;
            margin-top: 8px;
            margin-bottom: 15px;
          }

          .center-menu_name--active {
            font-size: 14px;
            color: #333333;
            font-weight: 600;
            margin-top: 8px;
            margin-bottom: 15px;
          }

          .center-menu_block {
            width: 29px;
            height: 5px;
            background: #062dff;
          }
        }
      }
    }

    .banners {
      width: 345px;
      height: 120px;
      margin: 0 15px 17px 15px;

      .banner {
        width: 345px;
        height: 120px;
      }
    }
  }

  .header--fixed {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 40px;
    background: #ffffff;
    box-shadow: 0px -2px 20px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-end;

    img {
      width: 20px;
      height: 20px;
      padding: 10px;
    }
  }

  .header {
    width: 100%;
    height: 170px;
    background-image: url("../../assets/img/home_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .title {
      margin: 15px;
      width: 216px;
      height: 33px;
    }

    .top-menus {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .top-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 80px;
        padding: 10px 0;

        .top-menu_icon {
          height: 33px;
          width: 33px;
        }

        .top-menu_name {
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
